<template>
  <section class="ad-wrap">
    <Swiper
      :modules="modules"
      :pagination="{ clickable: true }"
      class="ad-swiper"
      :slides-per-view="1"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <template :key="index" v-for="(item, index) in productRender">
        <SwiperSlide>
          <el-image :src="item"> </el-image>
        </SwiperSlide>
      </template>
    </Swiper>
  </section>
  <section class="product-banner">
    <div class="flex list-wrap row">
      <template :key="index" v-for="(item, index) in bannerImgs">
        <div @click="toPath" class="banner-item">
          <div
            :style="{
              '--defaultBg': item.defaultBg,
              '--hoverbg': item.hoverbg,
            }"
            class="img"
          ></div>
          <p class="text">{{ item.name }}</p>
        </div>
      </template>
    </div>
  </section>
  <section class="video-wrap">
    <div class="title">特色工艺/商品</div>
    <div class="group-list">
      <template :key="index" v-for="(item, index) in 2">
        <div @click="handleShowVideoModal" class="video-item">
          <div class="name">烫色工艺</div>
          <div class="desc">
            提供烫金模版，支持烫金、烫银、烫镭射金、烫镭射银
          </div>
          <div
            :style="{
              '--defaultBg':
                'url(https://q01.yinge.cc/resource/2024/03/08/5018fae5-9317-412d-acc5-68b982097b9c.jpeg?imageMogr2/auto-orient/format/webp/thumbnail/!750x750r/interlace/1/ignore-error/1)',
            }"
            class="video"
          >
            <div class="video-icon"></div>
          </div>
        </div>
      </template>
    </div>
  </section>
  <el-dialog
    :show-close="false"
    class="video-dialog"
    v-model="showVideoModal"
    width="800"
  >
    <div class="left-content">
      <div
        v-if="!showVideo"
        :style="{
          height: '100%',
          'background-size': 'cover',
          'background-image':
            'url(https://q01.yinge.cc/resource/2024/03/08/5018fae5-9317-412d-acc5-68b982097b9c.jpeg?imageMogr2/auto-orient/format/webp/thumbnail/!750x750r/interlace/1/ignore-error/1)',
        }"
        class="video"
      >
        <div @click="handleShowVideo" class="video-icon"></div>
      </div>
      <div v-else class="video-wrapper">
        <video
          autoplay
          controls
          src="https://q01.yinge.cc/resource/2024/03/08/1f50238f-f692-48f1-ac1e-5556df66edf3.mp4"
        ></video>
      </div>
    </div>
    <div class="right-content">
      <div class="close-icon"></div>
      <div class="title">烫色工艺</div>
      <div class="desc">提供烫金模版，支持烫金、烫银、烫镭射金、烫镭射银</div>
      <div class="product">
        <p>相关商品</p>
        <div class="list-wrap">
          <div class="list-item">
            <el-image
              :src="'https://q01.yinge.cc/resource/2024/03/08/ccf4f545-6cc9-42e8-b0e8-fd4918bbb5aa.jpeg?imageMogr2/auto-orient/format/webp/thumbnail/!500x500r/interlace/1/ignore-error/1'"
              :fit="fit"
            ></el-image>
            <div class="text">
              <div>烫色邮票贴纸</div>
              <div>
                <span>1.60</span>
              </div>
            </div>
          </div>
          <div class="list-item">
            <el-image
              :src="'https://q01.yinge.cc/resource/2024/03/08/ccf4f545-6cc9-42e8-b0e8-fd4918bbb5aa.jpeg?imageMogr2/auto-orient/format/webp/thumbnail/!500x500r/interlace/1/ignore-error/1'"
              :fit="fit"
            ></el-image>
            <div class="text">
              <div>烫色邮票贴纸</div>
              <div>
                <span>1.60</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { Autoplay, FreeMode, Pagination } from 'swiper/modules'
import { Swiper, SwiperSlide } from 'swiper/vue'
import 'swiper/css'
import 'swiper/css/autoplay'
import 'swiper/css/pagination'
const modules = [Autoplay, FreeMode, Pagination]

import { computed, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'

const productRender = reactive([
  'https://q01.yinge.cc/resource/2024/03/15/5adf4bd2-933b-408f-ac33-5e900fa994e3.jpeg?imageMogr2/auto-orient/format/webp/interlace/1/ignore-error/1',
  'https://q01.yinge.cc/resource/2024/03/19/f633d89e-ac0d-4ef5-9be9-4c4deaf49369.jpeg?imageMogr2/auto-orient/format/webp/interlace/1/ignore-error/1',
])
const onSwiper = (swiper) => {}
const onSlideChange = (el) => {}

const bannerImgs = reactive([
  {
    defaultBg:
      'url(https://q01.yinge.cc/resource/2024/03/08/6a26b887-7a25-4a10-a3f5-1ac4d3f37a39.jpeg?imageMogr2/auto-orient/format/webp/thumbnail/!500x500r/interlace/1/ignore-error/1)',
    hoverbg:
      'url(https://q01.yinge.cc/resource/2024/03/08/35fcb8a5-fc31-49b1-a298-63cd34079caa.jpeg?imageMogr2/auto-orient/format/webp/thumbnail/!500x500r/interlace/1/ignore-error/1)',
    name: '吧唧徽章',
  },
  {
    defaultBg:
      'url(https://q01.yinge.cc/resource/2024/03/08/b3053db7-8a90-4789-9f3d-20c92a10dbcb.jpeg?imageMogr2/auto-orient/format/webp/thumbnail/!500x500r/interlace/1/ignore-error/1)',
    hoverbg:
      'url(https://q01.yinge.cc/resource/2024/03/08/3222c531-ccc0-4109-9a19-e8052734d1a9.jpeg?imageMogr2/auto-orient/format/webp/thumbnail/!500x500r/interlace/1/ignore-error/1)',
    name: '亚克力',
  },
])

let showVideoModal = ref(false)
const handleShowVideoModal = () => {
  showVideoModal.value = true
}
let showVideo = ref(false)
const handleShowVideo = () => {
  showVideo.value = true
}

const router = useRouter()
const toPath = () => {
  router.push('/products/list')
}
</script>
<style lang="scss" scoped>
.ad-wrap {
  width: 100%;
  margin: 0 auto;
  height: 280px;
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  .ad-swiper {
    height: 100%;
    width: 100%;
    .el-image {
      height: 100%;
      width: 100%;
    }
  }
}
.product-banner {
  width: 1180px;
  margin: 0 auto;
  padding: 30px 0;
  position: relative;
  .list-wrap {
    .banner-item {
      width: 102px;
      cursor: pointer;
      margin-right: 52px;
      display: flex;
      flex-direction: column;
      align-items: center;
      &:last-child {
        margin-right: 0;
      }
      .img {
        width: 100%;
        height: 76px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        transition: background-image 0.3s ease-in-out;
        background-image: var(--defaultBg);
        &:hover {
          background-image: var(--hoverbg);
        }
      }
      .text {
        text-align: center;
        margin-top: 10px;
        font-size: 14px;
        font-weight: 500;
        color: #121212;
      }
    }
  }
}
.video-wrap {
  width: 1180px;
  margin: 0 auto;
  padding-bottom: 60px;
  .title {
    font-weight: 600;
    font-size: 28px;
    color: #121212;
    line-height: 28px;
    text-align: left;
    font-style: normal;
    padding: 36px 0 20px;
  }
  .group-list {
    display: flex;
    flex-flow: row wrap;
    .video-item {
      position: relative;
      width: 380px;
      border-radius: 12px;
      padding: 24px 20px 20px;
      margin-bottom: 20px;
      margin-right: 20px;
      background-repeat: no-repeat;
      background-color: #fff;
      background-size: 100% 114px;
      background-image: url('https://q01.yinge.cc/resource/2024/03/08/0ec3de05-c72a-441c-978c-76ad2fe0fbf7.jpg');
      &:nth-child(3n) {
        margin-right: 0;
      }
      .name {
        width: 280px;
        font-weight: 600;
        font-size: 20px;
        color: #121212;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        margin-bottom: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .desc {
        width: 270px;
        height: 40px;
        font-weight: 400;
        font-size: 14px;
        color: #777e90;
        line-height: 20px;
        text-align: left;
        font-style: normal;
        margin-bottom: 20px;
      }
      .video {
        position: relative;
        width: 100%;
        height: 520px;
        background: #ffffff;
        border-radius: 8px;
        overflow: hidden;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 101%;
        background-image: var(--defaultBg);
        .video-icon {
          cursor: pointer;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 54px;
          height: 54px;
          background-image: url(https://q01.yinge.cc/resource/2024/02/23/921b19c4-1e8a-4247-88a5-826cced329b6.png);
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
        }
      }
    }
  }
}

.flex {
  display: flex;
}
.row {
  flex-direction: row;
}
</style>
<style lang="scss">
.video-dialog {
  border-radius: 20px;
  padding: 0;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    padding: 0 !important;
    display: flex;
  }
  .left-content {
    position: relative;
    width: 520px;
    height: 694px;
    background: #ffffff;
    border-radius: 20px 0 0 20px;
    overflow: hidden;
    background-color: #121212;
    .video-icon {
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 54px;
      height: 54px;
      background-image: url('https://q01.yinge.cc/resource/2024/02/23/921b19c4-1e8a-4247-88a5-826cced329b6.png');
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .video-wrapper {
      height: 100%;
      position: absolute;
      left: 0;
      right: 0;
      video {
        height: 100%;
        width: 100%;
      }
    }
  }
  .right-content {
    width: 330px;
    height: 693px;
    border-radius: 0 20px 20px 0;
    padding: 30px 20px 20px 20px;
    background: linear-gradient(180deg, #fcfae4 0%, #f7f8fa 18%, #f7f8fa 100%);
    .title {
      width: 240px;
      font-weight: 600;
      font-size: 24px;
      color: #121212;
      line-height: 30px;
      text-align: left;
      font-style: normal;
      margin-bottom: 8px;
    }
    .desc {
      width: 290px;
      font-weight: 400;
      font-size: 14px;
      height: 84px;
      color: #777e90;
      line-height: 20px;
      text-align: left;
      font-style: normal;
      margin-bottom: 8px;
    }
    .product {
      p {
        font-size: 14px;
        margin-bottom: 10px;
        font-weight: 500;
      }
      .list-wrap {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        .list-item {
          width: 140px;
          border-top-left-radius: 12px;
          border-top-right-radius: 12px;
          overflow: hidden;
          background-color: #fff;
          .text {
            padding: 10px 8px;
            div:nth-of-type(1) {
              font-size: 12px;
              margin-bottom: 8px;
            }
            div:nth-of-type(2) {
              span {
                font-size: 16px;
                font-family: MiSans, MiSans;
                font-weight: 600;
                color: red;
              }
            }
          }
        }
      }
    }
  }
}
</style>
